/**
 * 推荐组件 用于显示推荐信息
 * @returns
 */
import { ArrowRightOutlined } from '@ant-design/icons';
import { useState } from 'react';
import { Link } from 'react-router-dom';

interface MushroomItem {
  id: number;
  title: string;
  author: string;
  description: string;
  imageUrl: string;
}

const Recommend = () => {
  const [featuredMushroom] = useState<MushroomItem>({
    id: 1,
    title: '松茸',
    author: '云南野生菌研究所',
    description:
      '松茸，被誉为"菌中之王"，是一种珍贵的野生食用菌。生长于云南高山松林下，具有独特的松香味，营养价值极高。它不仅可以食用，在传统医学中也有重要应用。',
    imageUrl: 'https://img95.699pic.com/photo/60017/3438.jpg_wh300.jpg', // 这里需要替换为实际的图片路径
  });

  const [mushroomList] = useState<MushroomItem[]>([
    {
      id: 1,
      title: '牛肝菌',
      author: '野生菌专家组',
      description: '优质食用菌，富含蛋白质',
      imageUrl: 'https://th.bing.com/th/id/OIP.GcuYnOJqhCltj7I-56KlJAAAAA?rs=1&pid=ImgDetMain',
    },
    {
      id: 2,
      title: '竹荪',
      author: '菌类研究中心',
      description: '素有"菌中皇后"的美誉',
      imageUrl:
        'https://th.bing.com/th/id/R.94193bce9f69718410313ddf66ef3977?rik=zS5JFEMJI%2fUo7Q&riu=http%3a%2f%2fimg.cjveg.com%2fnews%2fimages%2f201810%2f8c50c75e576a46a6a681df738d3eb19b.jpg&ehk=GgdnF1xL%2bQN%2bwwjHfFX5MPW%2fX9kkE85pv7vqn5E0fRg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: 3,
      title: '鸡枞菌',
      author: '食用菌协会',
      description: '云南特色野生菌',
      imageUrl:
        'https://th.bing.com/th/id/R.0bfab7fb1e1359f09b4f63d9b7bfeab9?rik=xwK8129qulWuhw&riu=http%3a%2f%2fupload4.hlgnet.net%2fbbsupfile%2f2011%2f2011-02-19%2f20110219125211_3.jpg&ehk=t5OUAQVSxjlwFc6iNRwX9GP1VKmc2B%2fFpHXnTNjvh3g%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: 4,
      title: '羊肚菌',
      author: '菌类研究中心',
      description: '云南特色野生菌',
      imageUrl: 'https://th.bing.com/th/id/OIP.GcuYnOJqhCltj7I-56KlJAAAAA?rs=1&pid=ImgDetMain',
    },
  ]);

  return (
    <div className="w-full bg-white rounded-lg shadow-[0_0_10px_rgba(0,0,0,0.1)] p-6 mt-8">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-emerald-700 mb-2">商品推荐</h1>
        <Link to="/business">
          <span className="text-emerald-700">查看更多</span>
          <ArrowRightOutlined className="!text-emerald-700" />
        </Link>
      </div>
      <div className="w-full bg-white rounded-lg shadow-lg p-6">
        <div className="flex gap-8">
          {/* 左侧推荐详情 */}
          <div className="w-1/3 border-r border-gray-200 pr-6">
            <div className="featured-mushroom">
              <div className="text-2xl font-bold text-emerald-700 mb-2">
                {featuredMushroom.title}
              </div>
              <div className="text-gray-600 mb-2">作者：{featuredMushroom.author}</div>
              <div className="relative h-[300px] mb-4 overflow-hidden rounded-lg">
                <img
                  src={featuredMushroom.imageUrl}
                  alt={featuredMushroom.title}
                  className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
                />
              </div>
              <p className="text-gray-700 leading-relaxed">{featuredMushroom.description}</p>
            </div>
          </div>

          {/* 中间推荐列表 */}
          <div className="w-2/3">
            <div className="grid grid-cols-2 gap-6">
              {mushroomList.map((mushroom) => (
                <div
                  key={mushroom.id}
                  className="block group border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow duration-300"
                >
                  <div className="relative h-[200px] mb-3 overflow-hidden rounded-lg">
                    <img
                      src={mushroom.imageUrl}
                      alt={mushroom.title}
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                    />
                  </div>
                  <h3 className="text-lg font-semibold text-emerald-700 mb-1">{mushroom.title}</h3>
                  <div className="text-sm text-gray-600 mb-2">{mushroom.author}</div>
                  <p className="text-gray-700 text-sm line-clamp-2">{mushroom.description}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Recommend;
